import React from 'react';
import { Col } from 'antd';
import styles from './index.less';

const LabelValue = ({ label, value, flexCenter, grid = true, labelStyles = {} }) => (
    <div className={styles.labelAndValueWrapper} style={{ alignItems: flexCenter ? 'center' : 'initial' }}>
        <Col span={grid ? 4 : null}>
            <div style={{ textAlign: 'right', ...labelStyles }}>{label}：</div>
        </Col>
        <Col span={grid ? 12 : null}>
            {typeof value === 'string' ? (
                <span
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{
                        __html: value === '' ? '-' : value?.replace(/[\r\n]+/g, '<br />')
                    }}
                />
            ) : (
                <div style={{ display: 'inline-block', minWidth: 120 }}>{value || '-'}</div>
            )}
        </Col>
    </div>
);

export default LabelValue;
